<template>
	<view class='afterSale'>
		<view class='line dFlex jBetween_aCenter'>
			<text>售后类型</text>
			<view class='line_val'>
				<picker mode="selector" :range="refund_type_arr" @change='selectType'>
					<input type="text" disabled :value='refund_type_arr[refund_type_index]' placeholder="请选择售后类型">
				</picker>
			</view>
		</view>
		<view class='line reason'>
			<text>退货理由</text>
			<view class='line_val'>
				<textarea rows="10" v-model='refund_reason' placeholder="请输入退货理由"></textarea>
			</view>
		</view>
		<view class='line reason'>
			<text>图片说明</text>
			<view class='line_val'>
				<view class="imgs dFlex jStart_aStart">
					<view class="upTool imgPublic" @tap='upImg'>
						<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/upTool.png" mode="widthFix"></image>
					</view>
					<view class="imgFile">
						<view class="imgOne imgPublic" v-for="(item,index) in imagesArr" :key='index' @tap.stop='lookBig(item)'>
							<image :src="item" mode="widthFix"></image>
							<view class="del imgPublic" @tap.stop='delImg(index)'>
								<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/delIcon.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class='line dFlex jBetween_aCenter'>
			<text>联系方式</text>
			<view class='line_val'>
				<input type="number" v-model='mobile' placeholder="请输入联系方式">
			</view>
		</view>
		<view class="loginBtn" @tap.stop='saveInfo'>提交</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order_id:'',
				order_detail_id:'',
				refund_num:'',
				refund_type_arr:['退款(商品在服务点)','退货退款','仅退款(缺货或未送达)'],
				refund_type_index:'',
				refund_reason:'',
				mobile:'',
				imagesArr:[],
			};
		},
		onLoad(e){
			console.log(e);
			this.order_id = e.order_id;
			this.order_detail_id = e.order_detail_id?e.order_detail_id:'';
			this.refund_num = e.refund_num?e.refund_num:'0';
		},
		methods:{
			// 提交售后
			saveInfo(){
				var refund_type = '';
				if(this.refund_type_index.length){
					refund_type = Number(this.refund_type_index) + 1;
				}
				if(!refund_type){
					uni.showToast({title:'请选择售后类型',icon:'none',})
					return;
				}
				if(!this.refund_reason){
					uni.showToast({title:'请填写退货理由',icon:'none',})
					return;
				}
				if(!this.imagesArr.length){
					uni.showToast({title:'请上传图片',icon:'none',})
					return;
				}
				if(!this.mobile){
					uni.showToast({title:'请输入联系方式',icon:"none"})
					return;
				}
				this.tool.getData('/api/refund/submitRefund',{
					order_id:this.order_id,
					order_detail_id:this.order_detail_id,
					refund_num:this.refund_num,
					refund_type:refund_type,
					refund_reason:this.order_detail_id ? this.refund_reason : '取消订单',
					refund_reason_imgs:this.imagesArr.join(','),
					mobile:this.mobile,
					type:'1',
				}).then(res=>{
					if(res){
						uni.showToast({
							title:'售后信息已提交',
							icon:"success"
						})
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},1650)
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 选择售后类型
			selectType(e){
				this.refund_type_index = e.detail.value;
			},
			// 上传图片
			upImg(){
				let len = 9-this.imagesArr.length?9-this.imagesArr.length:0;
				if(len){
					uni.chooseImage({
						count: len, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album','camera'], //从相册选择
						success:(res)=>{
							if(res.tempFilePaths.length){
								res.tempFilePaths.map((item,index)=>{
									this.tool.upImg(item).then(thumb=>{
										console.log(thumb);
										if(thumb){
											this.imagesArr.push(thumb.fullurl);
										}
									}).catch(err=>{
										console.log(err);
									})
								})
							}
						},
						fail:(err)=>{
							uni.showToast({
								title:"图片选择失败",
								icon:"none"
							})
						}
					})
				}else{
					uni.showToast({
						title:'最多上传9张图片',
						icon:"none"
					})
				}
			},
			// 查看大图
			lookBig(url){
				uni.previewImage({
					current:url,
					urls:this.imagesArr,
				})
			},
			// 删除图片
			delImg(idx){
				this.imagesArr.splice(idx,1);
			},
		}
	}
</script>

<style lang="scss">
	.afterSale{
		.loginBtn{
			position: fixed;
			bottom: 32px;
			text-align: center;
			border-radius: 40px;
			padding: 11px 0;
			color: white;
			width: 74.4%;
			left: 12.8%;
			padding: 22rpx 0;
			background: linear-gradient(180deg, #FC9700 0%, #FF5000 100%);
		}
		.line{
			.line_val{
				.imgs{
					width: 100%;
					.upTool{
						width: 68px;
						height: 68px;
						margin-right: 8px;
					}
					.imgFile{
						width:calc(100% - 76px);
						.imgOne{
							width: 75px;
							height: 75px;
							border-radius: 4px;
							margin-right: 12px;
							margin-bottom:5px;
							position: relative;
							overflow:hidden;
							display: inline-block;
							image{
								width: 68px;
							}
							.del{
								width: 16px;
								height: 16px;
								position: absolute;
								top: 0;
								right: 0;
								image{
									width: 100%;
									height: 100%;
								}
							}
						}
					}
				}
				input{
					width:100%;
					text-align: right;
				}
				margin-left:12px;
				flex:1;
			}
			width:100%;
			padding: 10px;
			box-sizing: border-box;
			background:white;
			border-radius: 4px;
			margin-bottom: 12px;
		}
		.reason{
			.line_val{
				width:100%;
				margin-top: 8px;
				margin-left:0;
			}
		}
		width:100%;
		padding:12px;
		box-sizing: border-box;
	}
</style>
